﻿.childNavigator {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
}

    .childNavigator.visible {
        visibility: visible;
    }

    .childNavigator .childNavigator-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0;
        /*display : none;*/
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transition: opacity 600ms ease-in-out;
        transition: opacity 600ms ease-in-out;
        
    }

        .childNavigator .childNavigator-overlay.visible {
            /*display : block;*/
            opacity: 0.7;
        }

    .childNavigator .childNavigator-contentPlaceholder {
        position: absolute;
        width: 100%;
        max-width: 600px;
        height: 100%;
        right: 0;
        /*display : none;*/
        top: 0;
        -webkit-transition: -webkit-transform 250ms ease-in-out 100ms;
        transition: transform 250ms ease-in-out 100ms;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        background-color: white;
    }

        .childNavigator .childNavigator-contentPlaceholder.visible {
            /*display : block;*/
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
